<main>
  <!-- <app-card>
    <h2 class="card-title">Shoes!</h2>
    <ng-template appBtnTemplate #btnTemplate>
      <button class="btn btn-primary">Buy Now</button>
    </ng-template>
    <img src="assets/shoe.jpg" alt="Shoes" />
    <app-counter />
  </app-card> -->
  <app-list [items]="items">
    <ng-template #listTemplate let-item>
      <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex gap-x-4">
          <img
            class="h-12 w-12 flex-none rounded-full bg-gray-50"
            src="assets/{{ item.name }}.jpg"
            alt=""
          />
          <div class="min-w-0 flex-auto">
            <p class="text-sm font-semibold leading-6 text-gray-900">
              <a href="#" class="capitalize">
                {{ item.name }}
              </a>
            </p>
            <p class="mt-1 flex text-xs leading-5 text-gray-500">
              {{ item.description }}
            </p>
          </div>
        </div>
        <div
          class="flex items-center gap-x-4 cursor-pointer"
          (click)="likeItem(item.name)"
        >
          <div class="hidden sm:flex sm:flex-col sm:items-end">
            <p *ngIf="!item.liked" class="mt-1 text-xs leading-5 text-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
                />
              </svg>
            </p>
            <p *ngIf="item.liked" class="mt-1 text-xs leading-5 text-red-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="red"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
                />
              </svg>
            </p>
          </div>
        </div>
      </li>
    </ng-template>
  </app-list>
</main>
